<template>
  <div id="emrStandardDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :disabled="disabledTag" :loading="qloading" @click="findEmrItemStandardList"></vxe-button>
        <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加" :disabled="disabledTag" @click="addItemStandardDialog()"></vxe-button>
        <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" :disabled="disabledTag" @click="itemStandardDelete"></vxe-button>
      </template>
    </vxe-toolbar>

    <div class="tableBox">
      <vxe-table ref="itemStandardTableRef" :data="itemStandardList" :loading="qloading" class="mytable-scrollbar" border align="center" height="auto" :row-config="{ isCurrent: true, isHover: true}" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" resizable show-overflow keep-source>
        <vxe-column type="checkbox" width="30"></vxe-column>
        <vxe-column field="standardCode" title="项目代号" width="80" tree-node align="left">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" @click="editItemStandardDialog(row)">
              <span>{{row.standardCode}}</span>
            </el-link>
          </template>
        </vxe-column>
        <vxe-column field="gradeCode" title="等级" width="50">
        </vxe-column>
        <vxe-column field="standardType" title="评价类型" width="80">
          <template #default="{ row }">
            <span>{{ formatStandardType(row.standardType) }}</span>
          </template>
        </vxe-column>
        <vxe-column field="evalContent" title="主要评价内容" show-overflow="false" width="150">
        </vxe-column>
        <vxe-column field="standardScore" title="功能评分" width="50">
        </vxe-column>
        <vxe-column field="massContent" title="数据质量评价内容" show-overflow="false">
        </vxe-column>
        <vxe-column field="isLis" title="是否lIS" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="getIsLisTagType(row.isLis)">
              {{ getIsLisDesc(row.isLis) }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column field="seq" title="顺序" width="50"> </vxe-column>
      </vxe-table>
    </div>

    <vxe-modal v-model="isVisiable" width="55vw" height="70vh" show-footer :mask="false" @close="cancelItemStandardEvent">
      <template #title>
        <span>评价标准</span>
      </template>
      <template #default>
        <div class="form-panel">
          <vxe-form :data="itemStandardForm" title-width="100px">
            <vxe-form-gather span="8">
              <vxe-form-item title="项目代号" span="24" field="standardCode">
                <template #default="{ data }">
                  <vxe-input v-model="data.standardCode" placeholder="项目代号"></vxe-input>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="8">
              <vxe-form-item title="等级" span="24" field="gradeCode">
                <template #default="{ data }">
                  <vxe-select v-model="data.gradeCode" placeholder="请选择等级" clearable>
                    <vxe-option v-for="typeObj in gradeList" :key="typeObj.gradeCode" :label="typeObj.gradeName" :value="typeObj.gradeCode" />
                  </vxe-select>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="8">
              <vxe-form-item title="评价类型" span="24" field="standardType">
                <template #default="{ data }">
                  <vxe-select v-model="data.standardType" placeholder="请选择评价类型" clearable>
                    <vxe-option v-for="typeObj in sTypeList" :key="typeObj.code" :label="typeObj.name" :value="typeObj.code" />
                  </vxe-select>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="8">
              <vxe-form-item title="功能评分" field="standardScore" span="24" :item-render="{}" title-overflow="title">
                <template #default="params">
                  <vxe-input v-model="params.data.standardScore" type="number" min="0" max="1000" placeholder="功能评分"></vxe-input>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="8">
              <vxe-form-item title="是否LIS系统" field="isLis" span="24" :item-render="{}" title-overflow="title">
                <template #default="params">
                  <el-switch v-model="params.data.isLis" inline-prompt active-text="是" inactive-text="否" :active-value="1" :inactive-value="0"></el-switch>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="8">
              <vxe-form-item title="顺序" field="seq" span="24" :item-render="{}" title-overflow="title">
                <template #default="params">
                  <vxe-input v-model="params.data.seq" type="number" min="0" max="1000" placeholder="顺序"></vxe-input>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="24">
              <vxe-form-item title="主要评价内容" field="evalContent" span="24" :item-render="{}" title-overflow="title">
                <template #default="params">
                  <vxe-textarea v-model="params.data.evalContent" :autosize="{ minRows: 8, maxRows: 16 }"></vxe-textarea>
                </template>
              </vxe-form-item>
            </vxe-form-gather>
            <vxe-form-gather span="24">
              <vxe-form-item title="数据质量内容" field="massContent" span="24" :item-render="{}" title-overflow="title">
                <template #default="params">
                  <vxe-textarea v-model="params.data.massContent" :autosize="{ minRows: 8, maxRows: 16 }"></vxe-textarea>
                </template>
              </vxe-form-item>
            </vxe-form-gather>

          </vxe-form>
        </div>
      </template>
      <template #footer>
        <vxe-button type="text" class="button-white" @click="cancelItemStandardEvent">取消</vxe-button>
        <vxe-button type="text" class="button-blue" @click="confirmItemStandardEvent">确定</vxe-button>
      </template>
    </vxe-modal>

  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
import { log } from 'console';
defineExpose({ initPage });
let sltEmrItem = ref(null);
let isVisiable = ref(false);

let itemStandardList: any = reactive([]);
let qloading = ref(false);
let disabledTag = ref(true);
let itemStandardForm = reactive({
  id: null,
  standardCode: '',
  standardName: '',
  standardType: '',
  standardScore: 0,
  evalContent: '',
  massContent: '',
  isLis: 1,
  versionCode: '',
  roleCode: '',
  itemCode: '',
  gradeCode: '',
  seq: 1,
  orgId: ''
});
let sTypeList: any = reactive([
  { code: '1', name: '基本' },
  { code: '2', name: '可选择' }
]);
let gradeList: any = reactive([]);

onMounted(() => {
  findFunctionList();
});

function findFunctionList() {
  gradeList.length = 0;
  const url = '/emr/grade/findEmrGradeList';
  let obj = {};
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      gradeList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function initPage(row: any) {
  if (isEmpty(row) || isEmpty(row.id)) {
    sltEmrItem.value = {};
    itemStandardList.length = 0;
  } else {
    sltEmrItem.value = row;
    findEmrItemStandardList();
  }
  if (!sltEmrItem.value.id) {
    disabledTag.value = true;
  } else {
    disabledTag.value = false;
  }
}

function findEmrItemStandardList() {
  if (isEmpty(sltEmrItem.value)) {
    VxeMessage('请选模型', VxeNotifyType.error);
  } else {
    qloading.value = true;
    itemStandardList.length = 0; //放入数据前清空数据
    const url = '/lis/emr/itemStandard/findEmrItemStandardList';
    proxy.$http
      //注意此处的数据条数
      .get(url, {
        params: {
          versionCode: sltEmrItem.value.versionCode,
          roleCode: sltEmrItem.value.roleCode,
          itemCode: sltEmrItem.value.itemCode
        }
      })
      .then((res: any) => {
        itemStandardList.push(...res.data);
        qloading.value = false;
      })
      .catch((err: any) => {
        qloading.value = false;
        VxeMessage('获取右侧获取质控项目表格数据异常', VxeNotifyType.error);
      });
  }
}

function addItemStandardDialog() {
  itemStandardForm.versionCode = sltEmrItem.value.versionCode;
  itemStandardForm.roleCode = sltEmrItem.value.roleCode;
  itemStandardForm.itemCode = sltEmrItem.value.itemCode;
  itemStandardForm.standardCode = sltEmrItem.value.roleCode + '.' + sltEmrItem.value.itemCode + '.';
  //
  if (itemStandardList && itemStandardList.length > 0) {
    itemStandardForm.seq = Math.max(...itemStandardList.map((item) => item.seq)) + 1;
  } else {
    itemStandardForm.seq = 1;
  }
  isVisiable.value = true;
}

function editItemStandardDialog(row: any) {
  setItemStandardForm(row);
  isVisiable.value = true;
}

function confirmItemStandardEvent() {
  if (itemStandardForm.id === null) {
    const url = '/lis/emr/itemStandard/addItemStandard';
    const iStandard = {
      standardCode: itemStandardForm.standardCode,
      standardName: itemStandardForm.standardName,
      standardType: itemStandardForm.standardType,
      standardScore: itemStandardForm.standardScore,
      evalContent: itemStandardForm.evalContent,
      massContent: itemStandardForm.massContent,
      isLis: itemStandardForm.isLis,
      versionCode: itemStandardForm.versionCode,
      roleCode: itemStandardForm.roleCode,
      itemCode: itemStandardForm.itemCode,
      gradeCode: itemStandardForm.gradeCode,
      seq: itemStandardForm.seq
    };
    proxy.$http
      .post(url, iStandard)
      .then((res: any) => {
        VxeMessage('新增成功', VxeNotifyType.success);
        clearItemStandardForm();
        findEmrItemStandardList();
        isVisiable.value = false;
      })
      .catch((err: any) => {
        VxeMessage('新增失败', VxeNotifyType.error);
      });
  } else {
    // 修改用户
    const url = '/lis/emr/itemStandard/editItemStandard';
    const iStandard = {
      id: itemStandardForm.id,
      standardCode: itemStandardForm.standardCode,
      standardName: itemStandardForm.standardName,
      standardType: itemStandardForm.standardType,
      standardScore: itemStandardForm.standardScore,
      evalContent: itemStandardForm.evalContent,
      massContent: itemStandardForm.massContent,
      isLis: itemStandardForm.isLis,
      versionCode: itemStandardForm.versionCode,
      roleCode: itemStandardForm.roleCode,
      itemCode: itemStandardForm.itemCode,
      gradeCode: itemStandardForm.gradeCode,
      seq: itemStandardForm.seq
    };
    proxy.$http
      .post(url, iStandard)
      .then((res: any) => {
        VxeMessage('修改成功', VxeNotifyType.success);
        findEmrItemStandardList();
        clearItemStandardForm();
        isVisiable.value = false;
      })
      .catch((err: any) => {
        VxeMessage('修改失败', VxeNotifyType.error);
      });
  }
}

function itemStandardDelete() {
  const sltStandards = (proxy.$refs.itemStandardTableRef as any).getCheckboxRecords();
  if (!(sltStandards.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { emrItemStandardList: sltStandards };
        const url = '/lis/emr/itemStandard/batchDeleteItemStandard';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            findEmrItemStandardList();
            VxeMessage(res.status.msg, VxeNotifyType.success);
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}

function cancelItemStandardEvent() {
  clearItemStandardForm();
  isVisiable.value = false;
}

// 清空中间规则弹框表单
function clearItemStandardForm() {
  itemStandardForm.id = null;
  itemStandardForm.standardCode = '';
  itemStandardForm.standardName = '';
  itemStandardForm.standardType = '';
  itemStandardForm.standardScore = 0;
  itemStandardForm.evalContent = '';
  itemStandardForm.massContent = '';
  itemStandardForm.isLis = 1;
  itemStandardForm.versionCode = '';
  itemStandardForm.roleCode = '';
  itemStandardForm.itemCode = '';
  itemStandardForm.gradeCode = '';
  itemStandardForm.seq = 1;
  itemStandardForm.orgId = '';
}

function setItemStandardForm(row: any) {
  itemStandardForm.id = row.id;
  itemStandardForm.standardCode = row.standardCode;
  itemStandardForm.standardName = row.standardName;
  itemStandardForm.standardType = row.standardType;
  itemStandardForm.standardScore = row.standardScore;
  itemStandardForm.evalContent = row.evalContent;
  itemStandardForm.massContent = row.massContent;
  itemStandardForm.isLis = row.isLis;
  itemStandardForm.versionCode = row.versionCode;
  itemStandardForm.roleCode = row.roleCode;
  itemStandardForm.itemCode = row.itemCode;
  itemStandardForm.gradeCode = row.gradeCode;
  itemStandardForm.seq = row.seq;
  itemStandardForm.orgId = row.orgId;
}

function formatStandardType(row: any) {
  let sTypeName = '';
  if (!isEmpty(row)) {
    let au = sTypeList.find((item: any) => item.code == row);
    sTypeName = au.name;
  }
  return sTypeName;
}

function getIsLisDesc(row) {
  if (row == 1) {
    return '是';
  } else if (row == 0) {
    return '否';
  } else {
    return '否';
  }
}
function getIsLisTagType(row) {
  if (row == 1) {
    return 'success';
  } else if (row == 0) {
    return 'danger';
  } else {
    return 'danger';
  }
}
</script>

<style lang="scss" scoped>
#emrStandardDiv {
  width: 100%;
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBox {
    height: 100%;
    background-color: $base-white;
  }
}

:deep(.vxe-form--item-title .vxe-form--item-title-label) {
  padding-left: 10px;
}
</style>